<template>
  <DialogVue :dialogVisible="dialogVisible" @closeModal="closeModal">
    <div class="dialog-title">
      <h3>身份验证</h3>
      <p>为了保护您得账号安全，请验证身份</p>
      <p>验证成功后进行下一步操作</p>
    </div>
    <div class="dialog-content">
      <p>使用手机号码:{{ userStore.userInfo.mobile }}</p>
      <div class="content-input">
        <input type="text" placeholder="输入密码" v-model="msgCode" />
        <button @click="sendCode">发送验证码</button>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button class="btn submit" @click="checkCode">验证</el-button>
      </div>
    </template>
  </DialogVue>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
// 弹出框
import DialogVue from "@components/dialog/index.vue";
// api
import { sendCheckCode, modifyPasswordVerification } from "@api/user";
// store
import { useGlobalStore } from "@stores";
import component from "element-plus/es/components/tree-select/src/tree-select-option.mjs";
const userStore = useGlobalStore().userStore;
const msgCode = ref("");
// 发送验证码
const sendCode = async () => {
  const res = await sendCheckCode();
  if (res.code != 0) return;
  ElNotification({
    showClose: true,
    message: res.errorMessage,
    type: "success",
  });
};
const emits = defineEmits(["closeDialog", "passVerify"]);
// 验证
const checkCode = async () => {
  const res = await modifyPasswordVerification(msgCode.value);
  if (res.code != 0) return;
  ElNotification({
    showClose: true,
    message: res.errorMessage,
    type: "success",
  });
  emits("passVerify");
};

// 关闭弹窗

const dialogVisible = ref(true);
const closeModal = () => {
  dialogVisible.value = false;
  emits("closeDialog");
};
</script>

<style lang="scss" scoped>
.dialog-title {
  text-align: center;
  p,
  h3 {
    margin: 0;
  }
  h3 {
    font-size: 19px;
    font-weight: 400;
    color: #232323;
    margin-bottom: 19px;
  }
  p {
    font-size: 11px;
    color: #6b6b6b;
    line-height: 22px;
  }
}
.dialog-content {
  margin-top: 35px;
  padding: 0 34px;
  p {
    font-size: 11px;
    color: #232323;
  }
  .content-input {
    position: relative;
    input {
      width: 100%;
      height: 39px;
      border-radius: 8px 8px 8px 8px;
      border: 1px solid #e0e0e0;
      font-size: 11px;
      color: #232323;
      padding: 11px;
      box-sizing: border-box;
      outline: none;
    }
    button {
      position: absolute;
      right: 11px;
      height: 39px;
      background-color: transparent;
      border: none;
      color: #c90000;
      font-size: 11px;
      cursor: pointer;
    }
  }
}
.dialog-footer {
  margin-top: 80px;
  padding: 0 34px;
  display: flex;
  .btn {
    flex: 1;
    height: 39px;
    border-radius: 8px 8px 8px 8px;
    font-size: 17px;
  }
  .cancle {
    color: #232323;
    background: #c7c7c7;
  }
  .submit {
    background: #c90000;
    color: #ffffff;
  }
}
</style>
